<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>构思者 | 专业软件开发公司</title>
    <meta name="author" content="湖北构思者科技有限公司">
    <meta name="robots" content="index, follow"> <!-- 允许搜索引擎索引和跟踪链接 -->
    <!-- 主要 SEO Meta 标签 -->
    <meta name="description"
        content="构思者 - 领先的软件开发与技术解决方案提供商，专注于企业级软件开发、ERP系统定制、微信/支付宝小程序开发、响应式Web应用设计、UI/UX用户体验优化及AI智能解决方案。凭借10年行业经验，为金融、医疗、零售等行业提供高效、安全、可扩展的数字化服务，助力企业实现业务增长与技术转型。">
    <meta name="keywords"
        content="软件开发,定制软件开发,企业ERP系统,微信小程序开发,支付宝小程序,Web全栈开发,前端开发,后端开发,UI设计,UX设计,用户界面优化,AI解决方案,大数据分析,云计算服务,数字化转型,科技公司,构思者">
    <link rel="stylesheet" href="footer.css">
    <link rel="stylesheet" href="header.css">
    <style>
        
        /* 面包屑导航 */
        .breadcrumb {
            padding: 20px 0;
            font-size: 0.9rem;
        }

        .breadcrumb a {
            color: #3498db;
        }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

        .breadcrumb span {
            color: #7f8c8d;
        }

        /* 案例详情 */
        .case-detail {
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 40px;
        }

        .case-cover {
            width: 100%;
            height: 400px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .case-content {
            padding: 40px;
        }

        .case-meta {
            display: flex;
            margin-bottom: 20px;
        }

        .case-category {
            display: inline-block;
            padding: 4px 10px;
            background: #f1f9fe;
            color: #3498db;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-right: 15px;
        }

        .case-date {
            color: #95a5a6;
            font-size: 0.9rem;
        }

        .case-title {
            font-size: 2rem;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        .case-description {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #34495e;
            margin-bottom: 30px;
        }

        .case-section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: #2c3e50;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        .case-gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        .gallery-item {
            height: 200px;
            background-size: cover;
            background-position: center;
            border-radius: 4px;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .gallery-item:hover {
            transform: scale(1.05);
        }

        /* 相关案例 */
        .related-cases {
            margin-bottom: 60px;
        }

        .related-title {
            font-size: 1.5rem;
            margin-bottom: 30px;
            color: #2c3e50;
        }

        .related-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .related-item {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .related-item:hover {
            transform: translateY(-5px);
        }

        .related-image {
            width: 100%;
            height: 180px;
            background-size: cover;
            background-position: center;
        }

        .related-info {
            padding: 20px;
        }

        .related-name {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .related-category {
            display: inline-block;
            padding: 4px 10px;
            background: #f1f9fe;
            color: #3498db;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-bottom: 10px;
        }

        

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .case-cover {
                height: 350px;
            }

            .case-content {
                padding: 30px;
            }

            .case-gallery,
            .related-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }

            .case-cover {
                height: 300px;
            }

            .case-content {
                padding: 20px;
            }

            .case-title {
                font-size: 1.8rem;
            }

            .nav-list {
                display: none;
                position: absolute;
                top: 70px;
                left: 0;
                width: 100%;
                background-color: #fff;
                flex-direction: column;
                padding: 20px;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            }

            .nav-list.active {
                display: flex;
            }

            .nav-item {
                margin: 10px 0;
            }

            .mobile-menu-toggle {
                display: block;
            }

            .case-gallery,
            .related-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 15px 10px;
            }

            .case-cover {
                height: 250px;
            }

            .case-title {
                font-size: 1.5rem;
            }

            .case-description {
                font-size: 1rem;
            }
        }
    </style>
</head>

<body>
    <!-- 头部导航 -->
    <header>
        <div class="container header-container">
            <img src="logo.png" alt="湖北构思者科技有限公司" class="logo">
            <nav class="nav">
                <button class="mobile-menu-toggle" id="menuToggle">☰</button>
                <ul class="nav-list" id="navList">
                    <li class="nav-item"><a href="./index.html">首页</a></li>
                    <li class="nav-item"><a href="/case.html">案例</a></li>
                    <li class="nav-item"><a href="/about.html">关于我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 面包屑导航 -->
    <div class="container">
        <div class="breadcrumb">
            <a href="./index.html">首页</a> > <a href="./case.html">案例</a> > <span>案例详情</span>
        </div>
    </div>

    <!-- 案例详情 -->
    <div class="container">
        <div class="case-detail">
            <div class="case-cover"
                style="background-image: url('https://via.placeholder.com/1200x400/3498db/ffffff');"></div>

            <div class="case-content">
                <div class="case-meta">
                    <span class="case-category">APP开发</span>
                    <span class="case-date">2023年完成</span>
                </div>

                <h1 class="case-title">某电商APP开发项目</h1>

                <p class="case-description">
                    我们为知名电商品牌开发了一款移动购物应用，日均活跃用户超过50万。该应用采用了最新的技术架构，提供了流畅的用户体验和高效的购物流程。
                </p>

                <div class="case-section">
                    <h2 class="section-title">项目背景</h2>
                    <p>
                        客户是一家快速发展的电商平台，原有的移动应用已无法满足日益增长的用户需求。我们接手项目后，对原有应用进行了全面的重构和优化。
                    </p>
                </div>

                <div class="case-section">
                    <h2 class="section-title">技术方案</h2>
                    <p>
                        我们采用了React Native框架开发跨平台应用，后端使用Node.js和MongoDB构建高性能API服务。应用实现了以下核心功能：
                    </p>
                    <ul style="margin-left: 20px; margin-top: 15px;">
                        <li style="margin-bottom: 10px;">商品浏览与搜索</li>
                        <li style="margin-bottom: 10px;">购物车与结算系统</li>
                        <li style="margin-bottom: 10px;">用户评价与反馈</li>
                        <li style="margin-bottom: 10px;">个性化推荐系统</li>
                        <li style="margin-bottom: 10px;">订单跟踪与管理</li>
                    </ul>
                </div>

                <div class="case-section">
                    <h2 class="section-title">项目成果</h2>
                    <p>
                        项目上线后，用户满意度提升了35%，订单转化率提高了28%，应用性能指标显著改善：
                    </p>
                    <ul style="margin-left: 20px; margin-top: 15px;">
                        <li style="margin-bottom: 10px;">页面加载时间减少60%</li>
                        <li style="margin-bottom: 10px;">崩溃率降低至0.1%以下</li>
                        <li style="margin-bottom: 10px;">日均活跃用户增长120%</li>
                    </ul>
                </div>

                <div class="case-section">
                    <h2 class="section-title">项目截图</h2>
                    <div class="case-gallery">
                        <div class="gallery-item"
                            style="background-image: url('https://via.placeholder.com/400x200/3498db/ffffff');"></div>
                        <div class="gallery-item"
                            style="background-image: url('https://via.placeholder.com/400x200/e74c3c/ffffff');"></div>
                        <div class="gallery-item"
                            style="background-image: url('https://via.placeholder.com/400x200/2ecc71/ffffff');"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 相关案例 -->
        <div class="related-cases">
            <h2 class="related-title">相关案例</h2>

            <div class="related-grid">
                <div class="related-item">
                    <div class="related-image"
                        style="background-image: url('https://via.placeholder.com/400x200/e74c3c/ffffff');"></div>
                    <div class="related-info">
                        <span class="related-category">小程序</span>
                        <h3 class="related-name">餐饮点餐小程序</h3>
                    </div>
                </div>

                <div class="related-item">
                    <div class="related-image"
                        style="background-image: url('https://via.placeholder.com/400x200/2ecc71/ffffff');"></div>
                    <div class="related-info">
                        <span class="related-category">ERP系统</span>
                        <h3 class="related-name">制造业ERP系统</h3>
                    </div>
                </div>

                <div class="related-item">
                    <div class="related-image"
                        style="background-image: url('https://via.placeholder.com/400x200/f39c12/ffffff');"></div>
                    <div class="related-info">
                        <span class="related-category">物联网</span>
                        <h3 class="related-name">智能家居系统</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部信息 -->
    <footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-section contact-info">
                    <h3>联系方式</h3>
                    <p>电话: 199-8671-0390</p>
                    <p>微信: QQ137618881</p>
                </div>

                <div class="footer-section company-address">
                    <h3>公司地址</h3>
                    <p>湖北省恩施市御宾府10号楼1单101</p>
                </div>
            </div>

            <div class="copyright">
                <p>Copyright 2025 构思者</p>
                <!-- <p>All rights reserved. 京ICP备2023004016号-3</p> -->
            </div>
        </div>
    </footer>

    <script>
        // 移动菜单切换
        document.getElementById('menuToggle').addEventListener('click', function () {
            document.getElementById('navList').classList.toggle('active');
        });

        // 图片点击放大效果
        const galleryItems = document.querySelectorAll('.gallery-item');
        galleryItems.forEach(item => {
            item.addEventListener('click', function () {
                // 这里可以添加图片放大查看的功能
                alert('图片放大查看功能将在实际项目中实现');
            });
        });
    </script>
</body>

</html>